import React, { useEffect, useState } from "react";
import { createForm } from "rc-form";
import { List, InputItem, Toast, Modal } from "antd-mobile";
import Button from "../../../components/button";
import "./index.scss";
import BankItem from "./bankItem";
const iconXj = require("@/images/icon-xj1.png");
const pattern = {
	// email: /^([A-Za-z0-9_\-.])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,4})$/,
	bankCard: /^[1-9]\d{9,29}$/,
	phone: /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/,
	code: /^\d{6}$/,
	password: /^\d{6}$/
};

const Form = props => {
	const [isVisible, setIsVisible] = useState(false);
	const {
		form,
		getCode,
		values,
		submit,
		ocrHandle,
		goProtocol,
		verCode,
		disabled,
		supportedBankList
	} = props;
	const {
		getFieldProps,
		getFieldsValue,
		getFieldError,
		validateFields,
		setFieldsValue
	} = form;
	const { isClick, countDown } = verCode;
	useEffect(() => {
		if (values) {
			setFieldsValue(values);
		}
	}, [values]);

	const onErrorClick = name => {
		const message = getFieldError(name).join("、");
		Toast.info(message, 2);
	};

	//提交
	const submitHandle = () => {
		if (disabled) {
			return submit();
		}
		validateFields((err, values) => {
			if (!err) {
				if (submit) {
					submit(values);
				}
			}
		});
	};
	//获取验证码
	const handlerCode = () => {
		if (!isClick) return;
		let values = getFieldsValue(["accountNo", "userBankPhone"]);
		if (!values.accountNo) {
			return Toast.fail("银行卡账号格式不正确");
		}
		if (!values.userBankPhone) {
			return Toast.fail("预留手机号码格式不正确");
		}
		values.mobilePhone = values.userBankPhone;
		delete values.userBankPhone;
		getCode(values);
	};
	const fieldPropsMap = {
		accountNo: {
			rules: [
				{
					required: true,
					message: "银行卡号格式不正确",
					pattern: pattern.bankCard
				}
			]
		},
		userBankPhone: {
			rules: [
				{
					required: true,
					message: "预留手机号码格式不正确",
					pattern: pattern.phone
				}
			]
		},
		verifyCode: {
			rules: [
				{
					required: true,
					message: "验证码格式不正确",
					pattern: pattern.code
				}
			]
		}
	};
	return (
		<div className="form-addBack-wrapper">
			<List>
				<InputItem {...getFieldProps("userName")} editable={false}>
					姓名
				</InputItem>
				<InputItem {...getFieldProps("idNo")} editable={false}>
					身份证号
				</InputItem>
				<List.Item className="form-addBack-h1">
					<h1>
						请添加本人银行卡
						<i onClick={() => setIsVisible(true)}>支持银行列表</i>
					</h1>
				</List.Item>
				<InputItem
					{...getFieldProps("accountNo", fieldPropsMap.accountNo)}
					error={getFieldError("accountNo")}
					onErrorClick={() => onErrorClick("accountNo")}
					placeholder="请输入银行卡号"
					extra={<img src={iconXj} />}
					onExtraClick={disabled ? null : ocrHandle}
					disabled={disabled}
					type="number"
				>
					银行卡号
				</InputItem>
				<InputItem
					{...getFieldProps("userBankPhone", fieldPropsMap.userBankPhone)}
					error={getFieldError("userBankPhone")}
					onErrorClick={() => onErrorClick("userBankPhone")}
					placeholder="请输入银行预留手机号"
					disabled={disabled}
					type="number"
				>
					手机号
				</InputItem>
				{!disabled && (
					<InputItem
						{...getFieldProps("verifyCode", fieldPropsMap.verifyCode)}
						type="number"
						error={getFieldError("verifyCode")}
						onErrorClick={() => onErrorClick("verifyCode")}
						placeholder="请输入验证码"
						onExtraClick={handlerCode}
						disabled={disabled}
						maxLength={6}
						extra={
							<a className="code-extra">{isClick ? "获取验证码" : countDown}</a>
						}
					>
						验证码
					</InputItem>
				)}
			</List>
			<Modal
				visible={isVisible}
				transparent
				maskClosable={true}
				title="银行卡支持列表"
				closable={true}
				onClose={() => setIsVisible(false)}
				className="bank-list-modal"
			>
				<div style={{ height: 300, overflow: "scroll" }}>
					{supportedBankList.map(item => (
						<BankItem item={item} key={Math.random()} />
					))}
				</div>
			</Modal>
			<div className="add-bank-protocol">
				<div className="add-bank-protocol-ll" onClick={goProtocol}>
					查看<a>《连连支付相关服务协议》</a>
				</div>
				<div className="add-bank-protocol-message">
					我司正规持牌机构，全程信息加密处理，保障您的隐私安全
				</div>
			</div>
			{props.isHiddenBotton || (
				<div className="btn_box">
					<Button onClick={submitHandle}>同意协议并添加</Button>
				</div>
			)}
		</div>
	);
};
export default createForm()(Form);
